<template>
  <div class="container">
    <f-custom-upload
      :options="cropperOptions"
      :imgSize="2"
      :returnType="returnType"
      :imageUrl="imgUrl"
      @crop-upload-close="cropClose"
      @crop-upload-success="cropSuccess"
    />
  </div>
</template>
<script setup>
import { ref } from "vue";
const cropperOptions = {
  autoCrop: true, //是否默认生成截图框
  autoCropWidth: 200, //默认生成截图框宽度
  autoCropHeight: 200, //默认生成截图框高度
  fixedBox: true, //是否固定截图框大小 不允许改变
  previewsCircle: false, //预览图是否是圆形
  title: "裁剪图片", //模态框上显示的标题
};
const returnType = "base"; //裁剪返回类型 blob/base
const imgUrl = ref(""); //上传图片所得到的地址

//上传操作结束
const cropClose = () => {
  console.log("上传操作结束");
};
//上传图片成功
const cropSuccess = data => {
  console.log("上传图片成功", data)
  imgUrl.value = data;
};
</script>
<style lang="scss" scoped></style>
